<script setup lang="ts">
import { onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import { useExaminationStore } from "@/stores/examination";
import { useStore } from "@/stores/index";

const examinationStore = useExaminationStore();
const userStore = useStore();

const router = useRouter();

const typeName = computed(() => {
  if (examinationStore.questionTotal.examTypeId == 1) {
    return "日考";
  } else if (examinationStore.questionTotal.examTypeId == 2) {
    return "周考";
  } else if (examinationStore.questionTotal.examTypeId == 3) {
    return "月考";
  } else {
    return null;
  }
});

onMounted(() => {
  // examinationStore.setScore();
});

const jumpAnswerResultHandler = () => {
  router.push("/answerresult");
};
</script>

<template>
  <main>
    <div class="page-header">
      <div class="page-title">
        <p>评估报告</p>
      </div>
    </div>

    <div class="page-body">
      <!-- <div class="answer-header">
        <ul class="answer-info">
          <li>日考</li>
          <li>level 100</li>
          <li>题数共{{ examinationStore.calculateScore.totalCount }}</li>
          <li>考试时间：{{ formateTime }}</li>
        </ul>
      </div>

      <div class="score">
        得分：<span>{{ examinationStore.calculateScore.score }}</span>
      </div>

      <ul class="score-list">
        <li>日考题</li>
        <li>
          正确题数：{{ examinationStore.calculateScore.correctTotal }} /
          {{ examinationStore.calculateScore.totalCount }}
        </li>
        <li>排名：17</li>
        <li>打败了 89.2% 的学员</li>
        <li>
          <el-button @click="jumpAnswerResultHandler">查看错题</el-button>
        </li>
      </ul> -->

      <ul class="score-list">
        <li>姓名：{{ userStore.user.nickname }}</li>
        <li>考试题型：{{ typeName }}</li>
        <li>考试时间：{{ examinationStore.getTimeDiff }}</li>
        <li>
          知识点：level
          {{ examinationStore.questionTotal.levelArrayId.join(",") }}
        </li>
        <li>
          正确题数：{{ examinationStore.calculateScore.correctTotal }} /
          {{ examinationStore.calculateScore.totalCount }}
        </li>
        <li class="score">
          得分：<span>{{ examinationStore.calculateScore.score }}</span>
        </li>
        <li class="score">
          考试日期：<span>{{ examinationStore.calculateScore.score }}</span>
        </li>
        <li>
          <el-button @click="jumpAnswerResultHandler">查看错题</el-button>
        </li>
      </ul>
    </div>
  </main>
</template>

<style lang="scss">
@import "@/assets/scss/global.scss";

.answer-info {
  display: flex;

  li {
    height: 20px;
    line-height: 20px;
    padding: 0 10px;
    border: 1px solid #ddd;
    border-radius: 2px;
    margin-right: 20px;
    font-size: 12px;
  }
}

.score {
  padding: 20px 0;

  span {
    font-size: 28px;
    font-weight: 500;
    color: $color-theme;
  }
}
.score-list li {
  padding: 6px 0;
}
</style>
